// SAMPLE VEHICLE - ETAS AE96

const carDemoList = [
  {
    title: 'Hybrid',
    year: '2023',
    imgUrl: 'static/public/car.png'
  },
  {
    title: 'Fuel',
    year: '2023',
    imgUrl: 'static/public/car.png'
  },
  {
    title: 'Diesel',
    year: '1983',
    imgUrl: 'static/public/car.png'
  },
  {
    title: 'V2X',
    year: '2000',
    imgUrl: 'static/public/car.png'
  },
  {
    title: 'Hydrogen',
    year: '2022',
    imgUrl: 'static/public/car.png'
  }
]

function createCarDemoList () {
  let htmlStr = ''
  carDemoList.forEach((item, index) => {
    const vssHtmlStr = `
      <div class="sample-item ${index === 0 ? 'active' : ''}">
        <div class="mask loading-img">
          <img class="" src="static/public/64x64.gif" alt="">
        </div>

        <div class="img-box car-img">
          <img  src="${item.imgUrl}" alt="">
        </div>

        <div class="sample-item-content">
          <div class="content-title">${item.title}</div>
          <div class="content-desc">${item.year}</div>
        </div>
      </div>
    `
    htmlStr += vssHtmlStr
  })

  document.getElementById('sample-list').innerHTML = htmlStr
}



createCarDemoList()